<template>
  <div class="shop-management">
    <div class="page-header">
      <h2>商铺管理</h2>
      <p>管理商铺信息，包括出餐速度和配送难度评估</p>
    </div>

    <!-- 搜索和操作栏 -->
    <el-card class="search-card">
      <el-form class="search-form" inline>
        <el-form-item>
          <el-input
            v-model="searchForm.name"
            placeholder="搜索商铺名称"
            clearable
            size="default"
            style="width: 200px"
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.category"
            placeholder="商铺类型"
            clearable
            size="default"
            style="width: 150px"
            @change="handleSearch"
          >
            <el-option label="中餐" value="chinese" />
            <el-option label="西餐" value="western" />
            <el-option label="快餐" value="fastfood" />
            <el-option label="饮品" value="drinks" />
            <el-option label="甜品" value="dessert" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.preparationSpeed"
            placeholder="出餐速度"
            clearable
            size="default"
            style="width: 180px"
            @change="handleSearch"
          >
            <el-option label="快速 (≤15分钟)" value="fast" />
            <el-option label="正常 (15-30分钟)" value="normal" />
            <el-option label="慢速 (>30分钟)" value="slow" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="showAddDialog">
            <el-icon><Plus /></el-icon>
            添加商铺
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="default" @click="loadShops">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 商铺列表 -->
    <el-card class="table-container">
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
        @sort-change="handleSortChange"
      >
        <el-table-column prop="name" label="商铺名称" show-overflow-tooltip class-name="shop-name-col" />
        <el-table-column prop="category" label="类型" class-name="type-col">
          <template #default="{ row }">
            <el-tag :type="getCategoryTagType(row.category)" size="small">
              {{ getCategoryLabel(row.category) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip class-name="address-col">
          <template #default="{ row }">
            <span class="address-text">{{ row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" class-name="phone-col" />
        <el-table-column prop="preparationTime" label="时间" sortable="custom" class-name="time-col">
          <template #default="{ row }">
            {{ row.preparationTime }}分
          </template>
        </el-table-column>
        <el-table-column prop="preparationSpeed" label="速度" class-name="speed-col">
          <template #default="{ row }">
            <el-tag :type="getSpeedTagType(row.preparationSpeed)" size="small">
              {{ getSpeedLabel(row.preparationSpeed) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryDifficulty" label="难度" class-name="difficulty-col">
          <template #default="{ row }">
            <el-rate
              v-model="row.deliveryDifficulty"
              disabled
              size="small"
              :show-text="false"
            />
          </template>
        </el-table-column>
        <el-table-column prop="rating" label="评分" sortable="custom" class-name="rating-col">
          <template #default="{ row }">
            <el-rate
              v-model="row.rating"
              disabled
              size="small"
              show-score
              text-color="#ff9900"
              score-template="{value}"
            />
          </template>
        </el-table-column>
        <el-table-column width="300" label="操作" class-name="action-col">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="primary" size="small" @click="editShop(row)">
                编辑
              </el-button>
              <el-button type="success" size="small" @click="viewStats(row)">
                统计
              </el-button>
              <el-button type="danger" size="small" @click="deleteShop(row)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑商铺对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑商铺' : '添加商铺'"
      width="600px"
      @close="resetForm"
    >
      <el-form
        ref="shopFormRef"
        :model="shopForm"
        :rules="shopFormRules"
        label-width="120px"
      >
        <el-form-item label="商铺名称" prop="name">
          <el-input v-model="shopForm.name" placeholder="请输入商铺名称" style="width: 100%" />
        </el-form-item>
        <el-form-item label="商铺类型" prop="category">
          <el-select v-model="shopForm.category" placeholder="请选择商铺类型" style="width: 100%">
            <el-option label="中餐" value="chinese" />
            <el-option label="西餐" value="western" />
            <el-option label="快餐" value="fastfood" />
            <el-option label="饮品" value="drinks" />
            <el-option label="甜品" value="dessert" />
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="shopForm.address" placeholder="请输入详细地址" style="width: 100%" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="shopForm.phone" placeholder="请输入联系电话" style="width: 100%" />
        </el-form-item>
        <el-form-item label="平均出餐时间" prop="preparationTime">
          <el-input-number
            v-model="shopForm.preparationTime"
            :min="1"
            :max="120"
            placeholder="分钟"
            style="width: 200px"
          />
          <span style="margin-left: 8px;">分钟</span>
        </el-form-item>
        <el-form-item label="配送难度" prop="deliveryDifficulty">
          <el-rate
            v-model="shopForm.deliveryDifficulty"
            show-text
            :texts="['很容易', '容易', '一般', '困难', '很困难']"
          />
        </el-form-item>
        <el-form-item label="商铺评分" prop="rating">
          <el-rate
            v-model="shopForm.rating"
            show-text
            :texts="['很差', '差', '一般', '好', '很好']"
          />
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input
            v-model="shopForm.notes"
            type="textarea"
            :rows="3"
            placeholder="记录特殊情况，如停车位置、取餐注意事项等"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 统计详情对话框 -->
    <el-dialog
      v-model="statsDialogVisible"
      title="商铺统计详情"
      width="500px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="商铺名称">{{ currentShop?.name }}</el-descriptions-item>
        <el-descriptions-item label="商铺类型">{{ getCategoryLabel(currentShop?.category) }}</el-descriptions-item>
        <el-descriptions-item label="总订单数">{{ currentShop?.totalOrders || 0 }}</el-descriptions-item>
        <el-descriptions-item label="完成订单数">{{ currentShop?.completedOrders || 0 }}</el-descriptions-item>
        <el-descriptions-item label="完成率">
          {{ currentShop?.totalOrders ? ((currentShop.completedOrders / currentShop.totalOrders) * 100).toFixed(1) + '%' : '0%' }}
        </el-descriptions-item>
        <el-descriptions-item label="平均配送时间">{{ currentShop?.avgDeliveryTime || 0 }}分钟</el-descriptions-item>
        <el-descriptions-item label="商铺评分">{{ currentShop?.rating }}分</el-descriptions-item>
        <el-descriptions-item label="配送难度">{{ currentShop?.deliveryDifficulty }}星</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Plus, Refresh } from '@element-plus/icons-vue'
import { 
  getShopsApi, 
  createShopApi, 
  updateShopApi, 
  deleteShopApi,
  getShopApi
} from '@/common/apis/shops'
import type { ShopItem, CreateShopRequestData, UpdateShopRequestData } from '@/common/apis/shops/type'

defineOptions({
  name: 'ShopManagement'
})

// 响应式数据
const loading = ref(false)
const dialogVisible = ref(false)
const statsDialogVisible = ref(false)
const isEdit = ref(false)
const selectedShop = ref(null)
const currentShop = ref(null)

// 搜索表单
const searchForm = reactive({
  name: '',
  category: '',
  preparationSpeed: ''
})

// 商铺表单
const shopForm = reactive({
  id: '',
  name: '',
  category: '',
  address: '',
  phone: '',
  preparationTime: 20,
  deliveryDifficulty: 3,
  rating: 4,
  notes: ''
})

// 表单验证规则
const shopFormRules = {
  name: [{ required: true, message: '请输入商铺名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择商铺类型', trigger: 'change' }],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  preparationTime: [{ required: true, message: '请输入出餐时间', trigger: 'blur' }]
}

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 表格数据
const tableData = ref([])

// 模拟数据
const mockData = [
  {
    id: '1',
    name: '老王家麻辣烫',
    category: 'chinese',
    address: '朝阳区建国路88号',
    phone: '13800138001',
    preparationTime: 15,
    preparationSpeed: 'fast',
    deliveryDifficulty: 2,
    rating: 4.5,
    notes: '停车方便，老板人很好',
    totalOrders: 156,
    completedOrders: 148,
    avgDeliveryTime: 25,
    deliveryRecords: [
      { date: '2024-01-15', orderCount: 8, avgTime: 22, notes: '正常' },
      { date: '2024-01-14', orderCount: 12, avgTime: 28, notes: '下雨天' }
    ]
  },
  {
    id: '2',
    name: '肯德基(建国门店)',
    category: 'fastfood',
    address: '朝阳区建国门外大街1号',
    phone: '13800138002',
    preparationTime: 8,
    preparationSpeed: 'fast',
    deliveryDifficulty: 1,
    rating: 4.2,
    notes: '取餐快，停车位充足',
    totalOrders: 289,
    completedOrders: 276,
    avgDeliveryTime: 18
  },
  {
    id: '3',
    name: '张记兰州拉面',
    category: 'chinese',
    address: '海淀区中关村大街15号',
    phone: '13800138003',
    preparationTime: 35,
    preparationSpeed: 'slow',
    deliveryDifficulty: 4,
    rating: 3.8,
    notes: '现做现卖，需要等待，小区不好找',
    totalOrders: 78,
    completedOrders: 71,
    avgDeliveryTime: 45
  }
]

// 获取类型标签样式
const getCategoryTagType = (category: string) => {
  const types = {
    chinese: 'danger',
    western: 'warning',
    fastfood: 'success',
    drinks: 'info',
    dessert: ''
  }
  return types[category] || ''
}

// 获取类型标签文本
const getCategoryLabel = (category: string) => {
  const labels = {
    chinese: '中餐',
    western: '西餐',
    fastfood: '快餐',
    drinks: '饮品',
    dessert: '甜品'
  }
  return labels[category] || category
}

// 获取速度标签样式
const getSpeedTagType = (speed: string) => {
  const types = {
    fast: 'success',
    normal: 'warning',
    slow: 'danger'
  }
  return types[speed] || ''
}

// 获取速度标签文本
const getSpeedLabel = (speed: string) => {
  const labels = {
    fast: '快速',
    normal: '正常',
    slow: '慢速'
  }
  return labels[speed] || speed
}

// 计算出餐速度
const calculatePreparationSpeed = (time: number) => {
  if (time <= 15) return 'fast'
  if (time <= 30) return 'normal'
  return 'slow'
}

// 搜索处理
const handleSearch = () => {
  loadTableData()
}

// 排序处理
const handleSortChange = ({ prop, order }) => {
  // 实际项目中这里会调用API进行排序
  console.log('排序:', prop, order)
}

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  loadTableData()
}

const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
  loadTableData()
}

// 显示添加对话框
const showAddDialog = () => {
  isEdit.value = false
  dialogVisible.value = true
}

// 编辑商铺
const editShop = (row: any) => {
  isEdit.value = true
  Object.assign(shopForm, row)
  dialogVisible.value = true
}

// 查看统计
const viewStats = (row: any) => {
  selectedShop.value = row
  currentShop.value = row
  statsDialogVisible.value = true
}

// 删除商铺
const deleteShop = async (row: ShopItem) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除商铺"${row.name}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    loading.value = true
    
    try {
      await deleteShopApi(row.id)
      ElMessage.success('删除成功')
      loadTableData()
    } catch (apiError: any) {
      console.warn('删除商铺API未实现，模拟删除成功:', apiError)
      
      // 模拟删除成功 - 从本地数据中移除
      const index = tableData.value.findIndex(item => item.id === row.id)
      if (index > -1) {
        tableData.value.splice(index, 1)
        pagination.total -= 1
      }
      ElMessage.success('删除成功')
      loading.value = false
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
      loading.value = false
    }
  }
}

// 重置表单
const resetForm = () => {
  Object.assign(shopForm, {
    id: '',
    name: '',
    category: '',
    address: '',
    phone: '',
    preparationTime: 20,
    deliveryDifficulty: 3,
    rating: 4,
    notes: ''
  })
}

// 提交表单
const submitForm = async () => {
  return handleSubmit()
}

const handleSubmit = async () => {
  try {
    loading.value = true
    
    if (isEdit.value) {
      // 编辑逻辑
      const updateData: UpdateShopRequestData = {
        name: shopForm.name,
        category: shopForm.category,
        address: shopForm.address,
        phone: shopForm.phone,
        preparationTime: shopForm.preparationTime,
        deliveryDifficulty: shopForm.deliveryDifficulty,
        rating: shopForm.rating,
        notes: shopForm.notes
      }
      
      try {
        await updateShopApi(shopForm.id, updateData)
        ElMessage.success('编辑成功')
      } catch (apiError: any) {
        console.warn('编辑商铺API未实现，模拟编辑成功:', apiError)
        
        // 模拟编辑成功 - 更新本地数据
        const index = tableData.value.findIndex(item => item.id === shopForm.id)
        if (index > -1) {
          tableData.value[index] = {
            ...tableData.value[index],
            ...updateData,
            preparationSpeed: calculatePreparationSpeed(updateData.preparationTime)
          }
        }
        ElMessage.success('编辑成功')
      }
    } else {
      // 添加逻辑
      const createData: CreateShopRequestData = {
        name: shopForm.name,
        category: shopForm.category,
        address: shopForm.address,
        phone: shopForm.phone,
        preparationTime: shopForm.preparationTime,
        deliveryDifficulty: shopForm.deliveryDifficulty,
        rating: shopForm.rating,
        notes: shopForm.notes
      }
      
      try {
        await createShopApi(createData)
        ElMessage.success('添加成功')
        // 添加这行：刷新列表数据
        await loadTableData()
      } catch (apiError: any) {
        console.warn('添加商铺API未实现，模拟添加成功:', apiError)
        
        // 模拟添加成功 - 添加到本地数据
        const newShop = {
          id: Date.now().toString(),
          ...createData,
          preparationSpeed: calculatePreparationSpeed(createData.preparationTime),
          totalOrders: 0,
          completedOrders: 0,
          avgDeliveryTime: 0
        }
        tableData.value.unshift(newShop)
        pagination.total += 1
        ElMessage.success('添加成功')
      }
    }
    
    dialogVisible.value = false
    resetForm()
    loading.value = false
  } catch (error: any) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败')
    loading.value = false
  }
}

// 刷新商铺数据
const loadShops = () => {
  loadTableData()
}

// 加载表格数据
const loadTableData = async () => {
  try {
    loading.value = true
    
    const params = {
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
      name: searchForm.name || undefined,
      category: searchForm.category || undefined,
      preparationSpeed: searchForm.preparationSpeed || undefined
    }
    
    console.log('调用getShopsApi，参数:', params)
    const response = await getShopsApi(params)
    console.log('API响应:', response)
    
    // 修复：由于axios拦截器已经返回了data部分，response直接就是{list, total, page, pageSize}
    if (response && response.list) {
      tableData.value = response.list
      pagination.total = response.total || 0
    } else if (response && Array.isArray(response)) {
      // 如果直接返回数组（兼容其他格式）
      tableData.value = response
      pagination.total = response.length
    } else {
      // 使用mock数据作为fallback
      console.warn('API响应格式异常，使用mock数据')
      tableData.value = mockData
      pagination.total = mockData.length
    }
    
    // 为每个商铺计算preparationSpeed
    tableData.value = tableData.value.map(shop => ({
      ...shop,
      preparationSpeed: shop.preparationSpeed || calculatePreparationSpeed(shop.preparationTime)
    }))
    
    loading.value = false
  } catch (error: any) {
    console.error('API调用失败:', error)
    ElMessage.warning('获取数据失败，使用示例数据')
    
    // API失败时使用mock数据
    tableData.value = mockData.map(shop => ({
      ...shop,
      preparationSpeed: shop.preparationSpeed || calculatePreparationSpeed(shop.preparationTime)
    }))
    pagination.total = mockData.length
    loading.value = false
  }
}

onMounted(() => {
  loadTableData()
})
</script>

<style scoped>
.shop-management {
  padding: 20px;
  background: #f0f2f5;
  min-height: 100vh;
}

.page-header {
  background: white;
  padding: 24px;
  margin-bottom: 16px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.page-header h2 {
  margin: 0;
  color: #262626;
  font-size: 20px;
  font-weight: 500;
}

.page-header p {
  margin: 8px 0 0;
  color: #8c8c8c;
  font-size: 14px;
}

/* 搜索区域样式 */
.search-card {
  padding: 24px;
  margin-bottom: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.search-form {
  margin-bottom: 0;
}

.search-form .el-form-item {
  margin-bottom: 0;
  margin-right: 24px;
}

.search-form .el-form-item:last-child {
  margin-right: 0;
}

/* 输入框和选择器样式 */
:deep(.el-input) {
  height: 32px;
}

:deep(.el-input__wrapper) {
  height: 32px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  background: white;
  padding: 0 11px;
}

:deep(.el-input__inner) {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #262626;
}

:deep(.el-input__wrapper):hover {
  border-color: #4096ff;
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #4096ff;
  box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
}

:deep(.el-select) {
  height: 32px;
}

:deep(.el-select .el-input) {
  height: 32px;
}

:deep(.el-select .el-input__wrapper) {
  height: 32px;
  padding: 0 11px;
}

:deep(.el-select .el-input__inner) {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}

:deep(.el-select__caret) {
  font-size: 14px;
  color: #bfbfbf;
}

/* 按钮样式 */
:deep(.el-button) {
  height: 32px;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 6px;
  font-weight: 400;
}

:deep(.el-button--default) {
  background: white;
  border: 1px solid #d9d9d9;
  color: #262626;
}

:deep(.el-button--default):hover {
  border-color: #4096ff;
  color: #4096ff;
}

:deep(.el-button--primary) {
  background: #1677ff;
  border: 1px solid #1677ff;
  color: white;
}

:deep(.el-button--primary):hover {
  background: #4096ff;
  border-color: #4096ff;
}

/* 表格容器 */
.table-container {
  background: white;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 表格样式 */
:deep(.el-table) {
  width: 100%;
  border: none;
  font-size: 14px;
}

:deep(.el-table th) {
  background: #f8f9fa;
  color: #333;
  font-weight: 600;
  font-size: 14px;
  padding: 20px 16px;
  border-bottom: 2px solid #e8e8e8;
  text-align: center;
}

:deep(.el-table td) {
  padding: 18px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #666;
  height: auto;
  text-align: center;
  vertical-align: middle;
}

:deep(.el-table tbody tr) {
  transition: background-color 0.2s ease;
}

:deep(.el-table tbody tr:hover) {
  background: #f8f9fa;
}

:deep(.el-table tbody tr:nth-child(even)) {
  background: #fafbfc;
}

:deep(.el-table tbody tr:nth-child(even):hover) {
  background: #f0f2f5;
}

:deep(.el-table--border) {
  border: none;
}

:deep(.el-table--border th) {
  border-right: 1px solid #e8e8e8;
}

:deep(.el-table--border td) {
  border-right: 1px solid #f0f0f0;
}

/* 表格列样式 */
:deep(.shop-name-col) {
  font-weight: 600;
  color: #333;
  text-align: left;
}

:deep(.address-col) {
  text-align: left;
}

:deep(.address-col .address-text) {
  display: block;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  line-height: 1.6;
  max-height: 50px;
  overflow: hidden;
}

/* 操作列按钮样式 */
:deep(.action-col) {
  text-align: center;
  padding: 12px 16px !important;
}

.action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  min-width: 50px;
  border-radius: 4px;
  font-weight: 500;
}

.action-buttons .el-button--small {
  height: 28px;
  padding: 0 16px;
  font-size: 12px;
}

.action-buttons .el-button--primary {
  background: #1677ff;
  border-color: #1677ff;
}

.action-buttons .el-button--primary:hover {
  background: #4096ff;
  border-color: #4096ff;
}

.action-buttons .el-button--success {
  background: #52c41a;
  border-color: #52c41a;
}

.action-buttons .el-button--success:hover {
  background: #73d13d;
  border-color: #73d13d;
}

.action-buttons .el-button--danger {
  background: #ff4d4f;
  border-color: #ff4d4f;
}

.action-buttons .el-button--danger:hover {
  background: #ff7875;
  border-color: #ff7875;
}

/* 标签样式 */
:deep(.el-tag) {
  border-radius: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid;
  font-weight: 400;
}

:deep(.el-tag--primary) {
  background: #e6f7ff;
  color: #1677ff;
  border-color: #91d5ff;
}

:deep(.el-tag--success) {
  background: #f6ffed;
  color: #52c41a;
  border-color: #b7eb8f;
}

:deep(.el-tag--warning) {
  background: #fff7e6;
  color: #fa8c16;
  border-color: #ffd591;
}

:deep(.el-tag--danger) {
  background: #fff2f0;
  color: #ff4d4f;
  border-color: #ffb3b3;
}

:deep(.el-tag--info) {
  background: #f5f5f5;
  color: #8c8c8c;
  border-color: #d9d9d9;
}

/* 评分组件 */
:deep(.el-rate) {
  font-size: 14px;
  display: flex;
  align-items: center;
}

:deep(.el-rate--small) {
  font-size: 12px;
}

:deep(.el-rate__item) {
  margin-right: 2px;
}

:deep(.el-rate__text) {
  font-size: 12px;
  margin-left: 6px;
  color: #8c8c8c;
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding: 16px 0;
}

:deep(.el-pagination) {
  background: transparent;
}

:deep(.el-pagination .el-pager li) {
  background: white;
  color: #262626;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  margin: 0 4px;
}

:deep(.el-pagination .el-pager li:hover) {
  border-color: #4096ff;
  color: #4096ff;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: #1677ff;
  border-color: #1677ff;
  color: white;
}

/* 对话框样式 */
:deep(.el-dialog) {
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

:deep(.el-dialog__header) {
  background: white;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-dialog__title) {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

:deep(.el-dialog__body) {
  padding: 24px;
  background: white;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px 24px;
  background: white;
  border-top: 1px solid #f0f0f0;
}

/* 表单样式 */
:deep(.el-form-item__label) {
  font-weight: 400;
  color: #262626;
  font-size: 14px;
}

/* 选择器下拉样式 */
:deep(.el-select-dropdown) {
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  background: white;
}

:deep(.el-select-dropdown__item) {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  font-size: 14px;
  color: #262626;
}

:deep(.el-select-dropdown__item:hover) {
  background: #f5f5f5;
}

:deep(.el-select-dropdown__item.selected) {
  background: #e6f7ff;
  color: #1677ff;
  font-weight: 500;
}

/* 卡片容器 */
.el-card {
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  margin-bottom: 16px;
  width: 100%;
}

:deep(.el-card__body) {
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .shop-management {
    padding: 16px;
  }
  
  .page-header {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  .page-header h2 {
    font-size: 18px;
  }
}
</style>